<template>
  <div class="formCls">
    <el-tabs v-model="curTab" @tab-click="setCurTab">
      <el-tab-pane v-for="(tab, index) in tabList" :key="index" :name="tab.name" :label="tab.label">
        <show-table :datum="tableData"
                    :showTab="false"
                    :enable-freeze="false"
                    :editable="true"
                    :banEditorColName="banEditorColName"
                    height="350px"
                    ref="showTable"
                    :alias-col-name="tableNames"
                    selected-mode="cell"
                    header-align="center"
                    :hiddenColName="hideColName"
                    :showOperationBtn="index === 0 ? false : true"
                    :permitAdd="(index === 1 && baseInfoData.length > 0) ? false : true"
                    cell-width="120px"
                    :value-change-callback="valueChangeCallback"
                    :removeCallback="valueChangeCallback"
                    :select-col-name="selectColName"
                    :option-data ="optionData"
                    :defaultTableHead="defaultTableHead"
                    :permitTableDataEmpty="true"
                    width="100%">
        </show-table>
      </el-tab-pane>
    </el-tabs>
    <div class="btn">
        <!--            <el-button type="primary" size="small"-->
        <!--                       @click="addItem">{{ this.$t('message.common.add') }}-->
        <!--            </el-button>-->
        <!--            <template slot-scope="scope">-->
<!--        <el-button type="primary" size="small" :disabled="this.status === -1 || this.status === 1 || this.status === 2"-->
<!--                   @click="edit()">{{ this.$t('message.common.edit') }}-->
<!--        </el-button>-->
        <el-button type="primary" size="small" :disabled="this.status!=1"
                   @click="save()">{{ this.$t('message.common.save') }}
        </el-button>
<!--        <el-button type="primary" size="small" :disabled="(this.status === -1 || (this.status === 0 ? !this.currentCardDataFlag : true) || this.status === 1 || this.status === 2)"-->
<!--                   @click="del()">{{ this.$t('message.common.delete') }}-->
<!--        </el-button>-->
<!--        <el-button type="primary" size="small" :disabled="!(this.status === 1 || this.status === 2)"-->
<!--                   @click="cancel()">{{ this.$t('message.common.cancel') }}-->
<!--        </el-button>-->
        <el-button type="primary" size="small"
                   @click="close">{{ this.$t('message.common.close') }}
        </el-button>
        <!--            </template>-->
    </div>
  </div>
</template>

<script>

import {electricalCommand} from "../../../command/ElectricalCommand";

export default {
  name: "AttributeCard",
  props: {
    selectNodeProp: {
      type: Object,
      default: {},
    },
    isAssemblyProp:{
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      status: -1,// -1:初始状态（只读，只能关闭),1-保存
      selectNode: {},
      // currentCardDataFlag: false, //当前卡片里面只要有一个属性有值，就是true(即数据库中有值）
      isAssembly: true,//是否为装配，装配走installType选项，零件走type选项
      // attriObjects: {},
      // formItems: [], //用于存储动态渲染的el-form-item数据
      // newItemData: {
      //     label: '',
      //     value: '',
      // }, //临时对象
      // showAtt: false,
      curTab: "modelInformation",
      tabList: [
        {name: "modelInformation", label: this.$t('message.EletronicInfoTool.modelInformation')},
        {name: "baseInformation", label: this.$t('message.EletronicInfoTool.baseInformation')},
        {name: "projectAnnotation", label: this.$t('message.EletronicInfoTool.ProjectAnnotation')},
        {name: "flagAnnotation", label: this.$t('message.EletronicInfoTool.FlagAnnotation')},
        {name: "annotationSet", label: this.$t('message.EletronicInfoTool.annotationSet')},
      ],
      tableData: [],
      tableNames: [],
      defaultTableHead: [],
      banEditorColName: ["partNumber", "instanceName"],
      //模型信息
      modelInfoData: [],
      modelInfoNames: {
        partNumber: "零件件号",
        instanceName: "实例名称",
        category: "分类",
        version: "版本",
      },
      //基本信息
      baseInfoData: [],
      baseInfoNames: {
        name: "名称",
        type: "类型",
        symmetricalPartInfo: "对称件信息",
        keyCompType: "关重件类型",
        copyRight: "版权声明",
        changeInstructions: "更改说明",
        changeReasonCode: "更改原因代码",
      },
      //工程注释
      projectAnnotationData: [],
      projectAnnotationNames: {
        ENCode: "EN序号",
        annoCode: "注释编号",
        contentDesc: "内容描述",
        quoSpec: "引用规范",
      },
      //旗注信息
      flagAnnotationData: [],
      flagAnnotationNames: {
        FLCode: "FL序号",
        annoCode: "注释编号",
        contentDesc: "内容描述",
        quoSpec: "引用规范",
      },
      //标注集
      annotationSetData: [],
      annotationSetNames: {
        type: "类型",
        value: "内容",
      },
      isSave: false,
      selectColName: ["category"],
      optionData: [],
      hideColName: ["projectId"],
    }
  },
  mounted() {

  },
  watch: {
    isAssemblyProp: {
      handler(newVal) {
        this.isAssembly = newVal;
      }
    },
    selectNodeProp:{
      handler(node) {
        console.log(node);
        this.status = -1;
        this.selectNode = node;
        this.clearData();
        //模型信息
        this.modelInfoData.push({
          partNumber: this.selectNode.partNumber,
          instanceName: this.selectNode.instanceName,
          category: this.selectNode.category,
          version: this.selectNode.version,
          projectId: this.selectNode.projectId,
        });
        //基本信息
        if (this.selectNode?.baseInfo?.name) {
          this.baseInfoData.push(this.selectNode?.baseInfo);
        }
        //工程注释
        this.selectNode?.enList?.forEach(en => {
          this.projectAnnotationData.push({
            ENCode: en.ENCode,
            annoCode: en.annoCode,
            contentDesc: en.contentDesc,
            quoSpec: en.quoSpec,
          });
        })
        //旗注信息
        this.selectNode?.flList?.forEach(fl => {
          this.flagAnnotationData.push({
            FLCode: fl.FLCode,
            annoCode: fl.annoCode,
            contentDesc: fl.contentDesc,
            quoSpec: fl.quoSpec,
          });
        })
        //标注集
        this.selectNode?.dimList?.forEach(anno => {
          this.annotationSetData.push(anno);
        })
        this.initData();
      }
    },
  },
  computed: {

  },
  methods: {
    clearData() {
      this.modelInfoData.splice(0);
      this.baseInfoData.splice(0);
      this.projectAnnotationData.splice(0);
      this.flagAnnotationData.splice(0);
      this.annotationSetData.splice(0);
    },
    initData() {
      //模型信息tab页打开
      this.curTab = "modelInformation";
      this.tableNames = this.modelInfoNames;
      this.defaultTableHead = Object.keys(this.tableNames);
      this.tableData = this.modelInfoData;
      this.selectColName = ["category"];
      this.optionData = {
        "category": this.typeOptions(),
      };
    },
    setCurTab(curTab) {
      this.selectColName = [];
      if (curTab.index === "0") {
        this.selectColName = ["category"];
        this.tableNames = this.modelInfoNames;
        this.tableData = this.modelInfoData;
      } else if (curTab.index === "1") {
        this.tableNames = this.baseInfoNames;
        this.tableData = this.baseInfoData;
      } else if (curTab.index === "2") {
        this.tableNames = this.projectAnnotationNames;
        this.tableData = this.projectAnnotationData;
      } else if (curTab.index === "3") {
        this.tableNames = this.flagAnnotationNames;
        this.tableData = this.flagAnnotationData;
      } else if (curTab.index === "4") {
        this.tableNames = this.annotationSetNames;
        this.tableData = this.annotationSetData;
      }
      if (this.tableNames) {
        this.defaultTableHead = Object.keys(this.tableNames);
      }
    },
    typeOptions() {
      let types=[];
      if (this.isAssembly) {
        types =
                [
                  {
                    value: 'ConnectorFasteningPart',
                    label: '连接器'
                  },
                  {
                    value: 'GroundingPart',
                    label: '接地桩'
                  },
                  {
                    value: 'ProtectionMaterialForHoleEdging',
                    label: '防磨边/圈',
                  },
                  {
                    value: 'WireSupportingPart',
                    label: '线缆支撑件',
                  },
                  {
                    value: 'SPAClampPart',
                    label: '双卡箍限位器',
                  },
                  {
                    value: 'ClampPart',
                    label: '金属卡箍',
                  },
                  {
                    value: 'SealingFittingPart',
                    label: '密封穿墙件',
                  },
                  {
                    value: 'RelaySocketPart',
                    label: '快卸式继电器座',
                  },
                  {
                    value: 'TerminalBoardPart',
                    label: '接线板',
                  },
                  {
                    value: 'ElectricalHarnessSeparator',
                    label: '电气线束隔离件',
                  },
                  {
                    value: 'AdhesiveHarnessMountPart',
                    label: '粘接型线束安装件',
                  },
                  {
                    value: 'ModuleRailPart',
                    label: '模块导轨',
                  },
                  {
                    value: 'WireHarnessStiffenerTubePart',
                    label: '线束加强杆',
                  },
                  {
                    value: 'MountPart',
                    label: '安装座',
                  },
                  {
                    value: 'InLineSpliceRectangleConnectorHousingPart',
                    label: '在线连接矩形电连接器壳体',
                  },
                  {
                    value: 'OtherPart',
                    label: '其它',
                  },
                  {
                      value: 'R',
                      label: 'R模型',
                  },
                  {
                      value: 'GeneralInformation_Wire',
                      label: '线束段'
                  },
                  {
                    value: 'NoDefined',
                    label: '暂未定义',
                  }
                ];
      } else {
        types =
                [
                  //连接器
                  {value: 'Fastening', label: '紧固件'},
                  {value: 'Safetywire', label: '保险丝'},
                  //接地桩
                  {value: 'Lug', label: '接地桩耳片'},
                  //防磨边
                  {value: 'Nylon Edging Grommet', label: '防磨边'},
                  {value: 'PTFE Split Grommet', label: '防磨圈'},
                  //线缆支撑件
                  {value: 'WireSupporting', label: '线缆支撑件'},
                  {value: 'Clamp Metallic', label: '金属卡箍'},
                  {value: 'Clamp Nylon', label: '尼龙卡箍'},
                  //限位器
                  {value: 'SPA ClampPart', label: '双卡箍限位器'},
                  //密封穿墙件
                  {value: 'SealingFitting', label: '密封穿墙件'},
                  //继电器
                  {value: 'Fast Relay Socket', label: '快卸式继电器座'},
                  {value: 'CERS0005G Relay Socket', label: 'CERS0005G继电器座'},
                  {value: 'CERS0006T Relay Socket', label: 'CERS0006T继电器座'},
                  //接线板
                  {value: 'Terminal Board', label: '接地桩底座'},
                  {value: 'Terminal Board Cover', label: '接地板接线端子'},
                  //电气线束隔离件
                  {value: 'Electrical Harness Separator', label: '电气线束隔离件'},
                  //粘接型线束安装件
                  {value: 'AdhesiveHarnessMount', label: '粘接型线束安装件'},
                  //模块导轨
                  {value: 'ModuleRail', label: '模块导轨'},
                  {value: 'Module', label: '模块'},
                  //线束加强杆
                  {value: 'WireHarnessStiffenerTube', label: '线束加强杆'},
                  //安装座
                  {value: 'Mount', label: '安装座'},

                ];
      }
      return types;
    },
    //添加数据
    // addItem() {
    //     this.status = 1;
    //     this.formItems.push({...this.newItemData});
    // },
    // del() {
    //   let params = {
    //     id: this.selectNode.id
    //   };
    //     electricalCommand.deleteElectricalAttributeById(params, res => {
    //       if (res) {
    //           electricalCommand.eventBusAlertMsg(this.$t('message.EletronicInfoTool.deleteSuccess'), 'success');
    //       } else {
    //           electricalCommand.eventBusAlertMsg(this.$t('message.EletronicInfoTool.deleteError'), 'error');
    //       }
    //    });
    // },
    cancel(){
        this.status = 0;
    },
    close() {
        electricalCommand.closeActiveCmd();
    },
    valueChangeCallback(index, key, cellOldValue, cellNewValue) {
      this.status = 1;
    },
    save() {
      if (this.modelInfoData.length === 0) {
        return;
      }
      let modelInfo = this.modelInfoData[0];
      let params = {
        projectId: modelInfo.projectId,
        partNumber: modelInfo.partNumber,
        instanceName: modelInfo.instanceName,
        category: modelInfo.category,
        version: modelInfo.version,
        baseInfo: this.baseInfoData.length > 0 ? this.baseInfoData[0] : {},
        enList: this.projectAnnotationData,
        flList: this.flagAnnotationData,
        dimList: this.annotationSetData,
      }
      electricalCommand.saveElectricalAttributeData(params, cb => {
        this.status = -1;
      });
      // //保存前校验
      // if(!this.formData?.type){
      //     electricalCommand.eventBusAlertMsg('请选择类型！','warning');
      //     return;
      // }
      // if(!this.formData?.partNumber){
      //     electricalCommand.eventBusAlertMsg('请输入零件件号！','warning');
      //     return;
      // }
      // if(!this.formData?.instanceName){
      //     electricalCommand.eventBusAlertMsg('请输入实例名称！','warning');
      //     return;
      // }
      // if (this.status === 2) { //修改 保存
      //     electricalCommand.updateElectricalAttributeById(
      //         {
      //             params: this.formData
      //         },
      //         res => {
      //             if (res) {
      //                 if (res) {
      //                     electricalCommand.eventBusAlertMsg(this.$t('message.EletronicInfoTool.updateSuccess'), 'success');
      //                 } else {
      //                     electricalCommand.eventBusAlertMsg(this.$t('message.EletronicInfoTool.updateError'), 'error');
      //                 }
      //             }
      //         });
      // } else if (this.status === 1) { //新增 保存
      //     electricalCommand.insertElectricalAttributeData(
      //         {
      //             params: this.formData,
      //             projectId: '',
      //         },
      //         res => {
      //             if (res === 'OK') {
      //                 electricalCommand.eventBusAlertMsg(this.$t('message.EletronicInfoTool.insertSuccess'), 'success');
      //             } else {
      //                 electricalCommand.eventBusAlertMsg(this.$t('message.EletronicInfoTool.insertError'), 'error');
      //             }
      //         })
      // }
      // this.status = 0;
    },
  },
}
</script>

<style scoped>
.formCls {
  width: 98%;
  margin-left: 5px;
}

.base-title-container {
    position: relative;
    border: 1px dotted #c0c0c0;
    padding: 10px 5px;
}

.formCls .el-form-item {
    margin: 0px 5px 5px 10px;
    text-align: left;
    width: fit-content;
}

.formCls >>> .el-form-item__label {
    float: unset;
    text-align: left;
    font-weight: bold;
    font-size: 12px;
    padding-right: 0;
}

.formCls >>> .el-form-item .el-input__inner {
    width: 400px;
    text-align: left;
}
.formCls >>> .el-form-item__content {
    line-height: 30px;
    margin: 5px 0px 5px 5px;
}

.btn {
    height: 10%;
    border: none;
    position: fixed;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
}
</style>